<template>
  <Paginator
    :rows="page.size"
    :totalRecords="page.total"
    :rowsPerPageOptions="[5, 10, 20, 50, 100]"
    template="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageInput RowsPerPageDropdown"
    currentPageReportTemplate="显示第 {first} - {last} 条，共 {totalRecords} 条"
    class="m-t-10"
    @page="pageChangeHandler"
  ></Paginator>
</template>
<script>
export default {
  name: 'TablePage',
  props: {
    page: {
      type: Object,
      required: true,
    },
    search: {
      type: Function,
      required: true,
    },
  },
  methods: {
    searchHandler(current, size) {
      if (current) this.page.current = current
      if (size) this.page.size = size

      this.search()
    },
    pageChangeHandler(event) {
      this.page.current = event.page + 1
      this.page.size = event.rows

      this.search()
    },
  },
}
</script>
